<template>
  <div class="materia">
    <el-card class="margin_30" shadow="always" :body-style="{ padding: '20px' }">
      <div slot="header">
        <span>
          <el-upload
            class="upload-demo"
            action="http://leju.bufan.cloud/lejuAdmin/material/uploadFileOssSave"
            :headers="Token"
            :on-success="upMateria"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="mini" type="primary">点击上传素材</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </span>
      </div>
      <div class="box">
        <el-card v-for="item in materialList" :key="item.id" class="card" shadow="always" :body-style="{ padding: '20px' }">
          <div slot="header">
            <span>创建时间:{{ item.createTime }}</span>
          </div>
          <el-image
            class="img"
            :src="item.ossUrl"
            :preview-src-list="srcList"
            @click="preview(item.ossUrl)"
          />
          <div class="del">
            <el-button type="danger" size="mini" @click="delmaterial(item.id)">删除</el-button>
          </div>

        </el-card>

      </div>
    </el-card>
    <el-pagination
      :current-page="start"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getToken } from '@/utils/myAuth'
import { findMaterialByPage, delMaterial
} from '@/api/content/material/index'
import mixins from '@/mixins/index'
export default {
  name: 'VueAdminTemplateMasterIndex',
  mixins: [mixins],

  data() {
    return {
      Token: {
        token: getToken()
      },
      materialList: [],
      srcList: []
    }
  },

  created() {
    this.init()
  },

  mounted() {

  },

  methods: {
    preview(url) {
      this.srcList = []
      this.srcList.push(url)
    },
    upMateria() {
      this.init()
    },
    delmaterial(id) {
      delMaterial(id).then(res => {
        this.init()
      })
    },
    init() {
      findMaterialByPage(this.start, this.limit).then(res => {
        this.total = res.data.total
        this.materialList = res.data.rows
      })
    }
  }
}
</script>

<style scoped lang="scss">
.materia{
  background-color: #f0f2f5;
  font-size: 14px;
  .box {
    width: 100%;
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20% ;
    grid-template-rows: auto auto;
    .card{
      margin: 10px;
      .img{
        width: 100%;
        height: 250px;
      }
      .del{
        display: flex;
        justify-content: end;
      }
    }
  }
}

</style>
